<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import { RouterLink, RouterView } from 'vue-router'
import { useStore } from "vuex";
import HelloWorld from './components/HelloWorld.vue'

const store = useStore();
const toggleNav = () => {
  if (store.state.nav) {
    store.commit('hideNav')
  } else {
    store.commit('showNav')
  }
}
const isMobile = function() {
  const sUserAgent = navigator.userAgent.toLowerCase();
  const bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  const bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  const bIsMidp = sUserAgent.match(/midp/i) == "midp";
  const bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  const bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  const bIsAndroid = sUserAgent.match(/android/i) == "android";
  const bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  const bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  return (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM);
}
if (isMobile()) {
  store.commit('showMobile')
} else {
  store.commit('showNav')
}
</script>

<template>
  <div id="nav-header" class="navbar" :class="{mobile: $store.state.mobile}" data-type="article" data-infoid="14 ">
    <a class="mobile-nav" v-if="$store.state.mobile" @click="toggleNav"></a>
    <ul class="nav">
      <!--<li id="nvabar-item-index"><a href="https://www.xmfhost.com/">首页</a></li>
      <li id="navbar-page-2"><a href="https://www.xmfhost.com/?id=2">留言本（友链申请）</a></li>
      <li id="navbar-category-2"><a href="https://www.xmfhost.com/?cate=2">免费云主机</a></li>
      <li id="navbar-category-4"><a href="https://www.xmfhost.com/?cate=4">电脑知识</a></li>-->
      <li id="navbar-category-8">
        <router-link to="/programmerTools">程序员小工具</router-link>
      </li>
      <li id="navbar-category-12">
        <router-link to="/calculators">计算工具</router-link>
      </li>
    </ul>
  </div>
  <router-view></router-view>
</template>

<style>

</style>
